<template>
    <div>

        <scroller scroll-direction="horizontal"
                  style="flex-direction: row;flex-wrap: nowrap;margin-left: 60px;margin-right: 60px;">

            <div class="panel">
                <text class="title">生涯课堂</text>
                <text class="text"> 继光高中生涯发展地图分外部探索与个人探索自研两大板块。每位学生可在了解全貌后，选择自己成长发展路径，在体验中选择，在实践中调整，在调整中决策！经过探索学习实践思考，遇到最好的自己</text>
                <div style="align-items: center;width: 560px;">
                    <image style="width: 560px;height:602px;margin-top: 60px;"
                           src="../../resource/img/map-img.jpg"></image>
                </div>
                <div style="align-items: center;width: 560px;">
                    <text class="btn" @click="jump('/map')">立即探索</text>
                </div>
            </div>
            <div class="panel">
                <text class="title">生涯课堂</text>
                <text class="text">继光高中生涯发展地图分外部探索与个人探索自研两大板块。每位学生可在了解全貌后，选择自己成长发展路径，在体验中选择，在实践中调整，在调整中决策！经过探索学习实践思考，遇到最好的自己！</text>
                <div style="align-items: center;width: 560px;">
                    <image style="width: 560px;height:602px;margin-top: 60px;"
                           src="../../resource/img/map-img.jpg"></image>
                </div>
                <div style="align-items: center;width: 560px;">
                    <text class="btn">立即探索</text>
                </div>
            </div>
            <div class="panel">
                <text class="title">生涯课堂</text>
                <text class="text">继光高中生涯发展地图分外部探索与个人探索自研两大板块。每位学生可在了解全貌后，选择自己成长发展路径，在体验中选择，在实践中调整，在调整中决策！经过探索学习实践思考，遇到最好的自己</text>
                <div style="align-items: center;width: 560px;">
                    <image style="width: 560px;height:602px;margin-top: 60px;"
                           src="../../resource/img/map-img.jpg"></image>
                </div>
                <div style="align-items: center;width: 560px;">
                    <text class="btn">立即探索</text>
                </div>
            </div>
            <div class="panel">
                <text class="title">生涯课堂</text>
                <text class="text">继光高中生涯发展地图分外部探索与个人探索自研两大板块。每位学生可在了解全貌后，选择自己成长发展路径，在体验中选择，在实践中调整，在调整中决策！经过探索学习实践思考，遇到最好的自己</text>
                <div style="align-items: center;width: 560px;">
                    <image style="width: 560px;height:602px;margin-top: 60px;"
                           src="../../resource/img/map-img.jpg"></image>
                </div>
                <div style="align-items: center;width: 560px;">
                    <text class="btn">立即探索</text>
                </div>
            </div>
        </scroller>
    </div>
</template>

<script>
    import AppHeader from '../../components/AppHeader.vue'
    import mixins from '../../mixins'
    module.exports = {
        mixins:[mixins],
        components: { AppHeader },
        data() {
            return {
                navList:[],
                headerTitle:"生涯课堂",
                lists: [1, 2, 3, 4, 5]
            }
        },
        created(){
            let self=this;
            self.getPageData();
        },
        methods: {

            getPageData(){
                let self=this;
                self.request({
                    url:"/data/index.json"
                }).then(res=>{
                    console.log(res);
                if(res.status==1){
                }
            });
            },
            clickTabItem:function(item){

            },
            clickAppNavItem:function(item){
                this.jump(item.link);
            },
            loadMoreList (event) {

            }
        }
    }

</script>

<style scoped>
    .panel{
        margin-left: 32px;
        margin-right: 32px;
        width: 560px;
    }
    .title{
        margin-top: 60px;
        text-align: center;
        font-size: 34px;
        color: #42b7ff;
    }
    .text{
        font-size: 24px;
        color: #b0b0b0;
        width: 560px;
        margin-top: 60px;
        line-height: 30px;
    }
    .btn{
        width: 280px;
        height: 86px;
        background-color:#42b7ff ;
        color: #ffffff;
        text-align: center;
        font-size: 34px;
        padding-top: 20px;
        border-radius: 50px;
        margin-top: 60px;

    }



</style>